import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Link from 'next/link'

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "SQL学习平台",
  description: "交互式学习PostgreSQL，无需安装任何软件",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        <header className="border-b">
          <div className="container mx-auto py-4 px-4 flex items-center justify-between">
            <Link href="/" className="text-xl font-bold">SQL学习平台</Link>
            <nav className="flex space-x-6">
              <Link href="/learn" className="hover:text-primary">学习路径</Link>
              <Link href="/playground" className="hover:text-primary">SQL操作场</Link>
              <Link href="/reference" className="hover:text-primary">参考文档</Link>
            </nav>
          </div>
        </header>
        {children}
        <footer className="border-t mt-10">
          <div className="container mx-auto py-6 px-4 text-center text-muted-foreground">
            <p>SQL学习平台 &copy; {new Date().getFullYear()}</p>
          </div>
        </footer>
      </body>
    </html>
  )
}
